import React, {Component} from 'react'
import Taro from '@tarojs/taro'
import {View, Image} from '@tarojs/components'
import './index.scss'
import backIcon from '../../assets/icon/back.svg'
const e = Taro.getSystemInfoSync()
const statusBar = e.statusBarHeight
const custom = Taro.getMenuButtonBoundingClientRect()
const customBar = custom.bottom + custom.top - statusBar

interface Props {
  title: string
  showBack: boolean
}

class Index extends Component<Props, {}> {

  render() {
    const {title,showBack} = this.props
    return (
      <View className='c-header' style={{height: `${customBar}px`}}>
        <View className='content' style={{height: `${customBar}px`}}>
          <View className='box' style={{marginTop: `${statusBar}px`, height: `${customBar - statusBar}px`}}>
            <View className='left-opt'>{!showBack?this.props.children:(
              <View className='left-opt-back-box' onClick={async ()=>{await Taro.navigateBack()}}><Image className='left-opt-back' src={backIcon} /></View>
            )}</View>
            <View className='title'>{title}</View>
            <View className='space' />
          </View>
        </View>
      </View>
    )
  }
}

export default Index
